<template>
	<view>
		<view class="list" v-for="(itemChile,i) in list" :key="i">
			<view class="gs" @tap="proUrl(itemChile.productId)">
				<image :src="itemChile.productImg"></image>
				<view class="fadf">
					<view class="fahg">
						<text class="title">减{{itemChile.reducedPrice||0}}元</text>
						{{itemChile.productName}}
					</view>
					<view class="aaad">
						<view class="ada" :style="{width:itemChile.ratio*4.4+'rpx'}"></view>
					</view>
					<view class="adfaj">已购{{itemChile.countSales||0}}件</view>
					<view class="ksdk">购买预获{{itemChile.timeBean}}时光豆</view>
				</view>
			</view>
			<view class="hf">
				<view class="gagg">
					<view>距结束<text>{{itemChile.times}}</text></view>
				</view>
				<view>
					<view class="aa">
						<view class="aff">￥{{itemChile.timerMoney?itemChile.timerMoney:itemChile.productmMinMoney}}</view>
						<view class="faa">￥{{itemChile.agoraMoney}}</view>
					</view>
				</view>
				<view class="yuy" @tap="proUrl(itemChile.productId)">
					马上抢
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that = "";
	export default {
		props: {
			list: { // 页面列表数据
				type: Array,
				// default: []
			}
		},
		data() {
			return {

			}
		},
		methods: {

			proUrl(id) {
				uni.navigateTo({
					url: "/pages/product/product?proId=" + id
				})
			},
		},
		mounted() {
			that = this;

		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef MP */
	.list {
		margin: 0;
	}

	/* #endif */
	.gs {
		padding-left: 32rpx;
		padding-top: 32rpx;
		background: #fff;

		image {
			vertical-align: top;
			width: 260rpx;
			height: 260rpx;
		}
	}

	.list {
		border-bottom: 1px solid #eee;
		background: #fff;
		height: 320rpx;

		.title {
			font-size: 26rpx;
			display: inline-block;
			background: rgb(255, 234, 233);
			color: $font-color-theme;
			padding: 4rpx 12rpx;
			margin-right: 12rpx;
		}
	}

	.fadf {
		display: inline-block;
		width: 420rpx;
		padding-left: 32rpx;
	}

	.fahg {
		height: 88rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 28rpx;
	}

	.aaad {
		margin-top: 22rpx;
		width: 100%;
		display: flex;
		font-size: 28rpx;
		padding: 0px;
		border-radius: 28px;
		background: #EEEEEE;
		height: 12rpx;
		position: relative;
	}

	.ada {
		background: $font-color-theme;
		border-radius: 28px;
		width: 140rpx;
		color: #FFFFFF;
	}

	.radw {
		position: absolute;
		right: 30rpx;
		color: #DD524D;
	}

	.ksdk {
		color: $font-color-theme;
		font-size: 26rpx;
		position: relative;
		top: -34rpx;
	}

	.hf {
		position: relative;
		padding-bottom: 8rpx;
		padding-left: 32rpx;
		background: #FFFFFF;
		color: #DD524D;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		/* bottom: 10px; */
		top: -54rpx;
	}

	.gagg {
		height: 48rpx;
		line-height: 48rpx;
		padding: 0 5rpx;
		color: #FFF;
		background: rgba(238,52,53,.8);
		font-size: 24rpx;
		margin-right: 30rpx;
		width: 260rpx;

		text {
			float: right;
		}

		view {
			padding: 0 10rpx;
		}
	}

	.aff {
		font-size: 36rpx;
	}

	.faa {
		text-decoration: line-through;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.48);
		padding-top: 10rpx;
		padding-right: 20rpx;
	}

	.aa {
		display: flex;
	}

	.adaf {
		padding-top: 2rpx;
	}

	.yuy {
		position: absolute;
		right: 20rpx;
		top: -2rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		border: 1px solid $font-color-theme;
		border-radius: 24rpx;
		padding: 0 30rpx;
	}

	.adfaj {
		padding-top: 10rpx;
		font-size: 24rpx;
		text-align: right;
	}
</style>
